<template>
  <div class="school-poster cu-modal" :class="showModal?'show':''">
    <view class="poster-main">
        <store-poster v-if="type=='store'&& showModal" 
          ref="store"
          :title="item.business_name" 
          :address="item.business_address"
          :price="item.starting_fee"
          :mainImg="item.business_image"
          :qrcode="item.code"
          ></store-poster>
        <article-poster v-if="type=='article'&&item.article_id&&showModal" 
        ref="articlePoster" :item="item"></article-poster>
        <used-poster v-if="type == 'used' && showModal" 
          ref="used" :item="item"></used-poster>
        <view class="poster-btns row">
          <view  class="poster-btn close" @click="close">关闭</view>
          <view  class="poster-btn save" @click="save">保存</view>
          <!-- <view  class="poster-btn get" @click="poster">获取</view> -->
        </view>
    </view>
    
  </div>
</template>

<script>
import Vue from 'vue';
import storePoster from "./store-poster"
import articlePoster from "./article-poster"
import usedPoster from "./used-poster"
export default Vue.extend({
  name: "school-poster",
  components:{
    storePoster, articlePoster, usedPoster
  },
  props: {
    type:{},
    item:{}
  },
  data() {
    return {
      showModal:false
    }
  },
  computed: {},
  methods: {
    initData(){
      
    },
    close(){
      this.showModal=false
    },
    open(){
      this.showModal=true
    },
    save(){
      console.log(this.type);
      console.log(this.$refs);

      if (this.type=="store") {
        this.$refs.store.saveCanvas()
      }
      if (this.type == "article") {
        let path= this.$refs.articlePoster
        console.log(path);
        this.$refs.articlePoster.saveCanvas()
      }
      if (this.type == "used") {
        this.$refs.used.saveCanvas()
      }
    }
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {
    console.log(this.item);
    // this.open()
  },
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
}) 
</script>

<style scoped lang="scss">
  @import "./main.scss";
</style>